<!--
 * @Author: zhangyun
 * @Date: 2021-04-20 16:26:07
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-25 14:09:07
 * @Desc: 
-->
<template>
  <section class="main container bg-gray-100">
    <router-view v-slot="{ Component, route }">
      <!-- 使用任何自定义过渡和回退到 `fade` -->
      <transition :name="route.meta.transition || 'bounce'">
        <component :is="Component" />
      </transition>
    </router-view>
  </section>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'Main',
  setup() {},
})
</script>

<style lang="scss" scoped>
.main {
  min-height: calc(100vh - 64px);
}

.bounce-enter-active {
  animation: bounce-in 0.3s;
}
.bounce-leave-active {
  animation: bounce-in 0.1s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
</style>
